<template>
	<div class="system_user_container">
		<depart-tree v-model="queryData.deptId" @selected="handleQueryTableData()"></depart-tree>
		<sw-common-frame :count="dataCount" :loading="loading">
			<template slot="button" v-if="isExistButton">
				<el-button size="small" type="primary" v-hasPermi="addedButton" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
				<el-button size="small" type="danger" v-hasPermi="batchDeleteButton" icon="el-icon-delete" plain @click="handleBatchDelete()">批量删除</el-button>
			</template>
			<el-form slot="query" size="small" inline v-if="isExistQuery">
				<el-form-item><el-input v-model="queryData.userName" clearable placeholder="用户姓名" style="width: 150px" /></el-form-item>
				<el-form-item><el-input v-model="queryData.account" clearable placeholder="电子邮箱" style="width: 150px" /></el-form-item>
				<el-form-item>
					<sw-custom-select v-model="queryData.del" :options="userStatusOptions" clearable placeholder="用户状态" style="width: 104px" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table slot="table" v-bind="tableConfig" :data="tableData" @row-click="handleRowSelected" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="42" align="center"></el-table-column>
				<el-table-column prop="userName" label="用户姓名" min-width="100" show-overflow-tooltip />
				<el-table-column prop="account" label="电子邮箱" min-width="180" show-overflow-tooltip />
				<el-table-column prop="filed2" label="单位名称" min-width="120"></el-table-column>
				<el-table-column prop="filed4" label="单位属性" min-width="100"></el-table-column>
				<el-table-column label="状态" min-width="80" :formatter="returnUserStatus" />
				<el-table-column label="创建者" min-width="90" :formatter="returnUserCreate" />
				<el-table-column label="操作" fixed="right" :width="userHandleWidth" v-if="isHasAuthButton">
					<template slot-scope="{ row }">
						<el-button type="text" v-hasPermi="handleButtons.update" @click.stop="handleOpenDialog(row.id)">编辑</el-button>
						<el-button type="text" v-hasPermi="handleButtons.delete" @click.stop="handleTableDelete(row)">删除</el-button>
						<dropdown :data="row" :auth-button="dropdownButtons" @command="handleUserCommand($event, row)" />
					</template>
				</el-table-column>
			</el-table>
			<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData" />
		</sw-common-frame>
		<config-role v-model="configDialog" :data-id="dataId" @refresh="queryTableData()"></config-role>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<audit-user v-model="auditDialog" :data-id="dataId"></audit-user>
	</div>
</template>

<script>
import lodash from 'lodash';
import auditUser from './audit';
import formDialog from './form';
import departTree from './tree';
import dropdown from './dropdown';
import configRole from './configRole';
import listMixins from '@/mixins/listMixins';
import { getUserList, deleteUser, banAndRecoveryUser } from '@/api/system/tbSysUser';
export default {
	name: 'userPage',
	mixins: [listMixins],
	components: { departTree, dropdown, formDialog, configRole, auditUser },
	data() {
		return {
			pageName: '用户',
			selectedUser: [],
			auditDialog: false,
			configDialog: false,
			userStatusOptions: [
				{ id: '1', name: '正常' },
				{ id: '2', name: '封禁' },
				{ id: '3', name: '待审核' }
			]
		};
	},
	computed: {
		listFunction() {
			return eval(getUserList);
		},
		deleteFunction() {
			return eval(deleteUser);
		},
		batchDeleteButton() {
			let batchDelete = this.buttons.find((n) => n.field === 'batchDelete');
			return batchDelete?.id;
		},
		frameTopButton() {
			let frameTopBtns = [];
			if (!!this.addedButton) {
				frameTopBtns = [...frameTopBtns, this.addedButton];
			}
			if (!!this.batchDeleteButton) {
				frameTopBtns = [...frameTopBtns, this.batchDeleteButton];
			}
			return frameTopBtns;
		},
		dropdownButtons() {
			let dropdownBtns = this.buttons.filter((n) => !n.handle && !!n.dropdown);
			let dropdownBtnMaps = lodash.keyBy(dropdownBtns, 'field');
			return lodash.mapValues(dropdownBtnMaps, (item) => item.id);
		},
		userHandleWidth() {
			let isExists = !lodash.isEmpty(this.dropdownButtons);
			let isHasAudit = this.tableData.some((n) => n.del === '3');
			let isHasBanRecovery = this.tableData.some((n) => n.del === '1' || n.del === '2');
			return this.handleWidth + (isExists && (isHasAudit || isHasBanRecovery) ? 62 : 0);
		}
	},
	methods: {
		//返回用户状态
		returnUserStatus(row) {
			let attrs = { size: 'small' };
			if (row.del === '1') {
				attrs = { ...attrs, type: 'success', text: '正常' };
			} else if (row.del === '2') {
				attrs = { ...attrs, type: 'warning', text: '封禁' };
			} else if (row.del === '3') {
				attrs = { ...attrs, type: 'info', text: '待审核' };
			}
			return this.$createElement('elTag', { attrs }, attrs.text);
		},

		//返回用户创建者
		returnUserCreate(row) {
			return row.createName || '注册用户';
		},

		//表格数据删除
		handleTableDelete(data) {
			let params = { ...data, name: data.userName };
			this.handleDeleteData([params]);
		},

		//批量删除数据
		handleBatchDelete() {
			let params = this.selectedUser.map((n) => {
				return { ...n, name: n.userName };
			});
			this.handleDeleteData(params);
		},

		//更多操作
		handleUserCommand(type, data) {
			if (type === 'blockedAccount') {
				this.banAndRecoveryRequest(data.id, 2);
			}
			if (type === 'recoverAccount') {
				this.banAndRecoveryRequest(data.id, 1);
			}
			if (type === 'auditAccount') {
				this.handleAuditUser(data.id);
			}
			if (type === 'updatePassword') {
				this.$bus.$emit('updatePassword', data.id);
			}
			if (type === 'configRole') {
				this.handleConfigRole(data.id);
			}
		},

		//封禁/恢复请求
		async banAndRecoveryRequest(id, del) {
			let params = { id, canUpdate: 1, del };
			let messageText = del === 1 ? '恢复' : del === 2 ? '封禁' : '';
			let result = await banAndRecoveryUser(params).then((res) => res.data);
			if (result.code === '0') {
				this.$showCustomMessage('success', `${messageText}账号成功`);
				this.queryTableData();
			}
		},

		//审核用户
		handleAuditUser(id) {
			this.dataId = id;
			this.auditDialog = true;
		},

		//配置角色
		handleConfigRole(id) {
			this.dataId = id;
			this.configDialog = true;
		},

		//选中数据项
		handleSelectionChange(selection) {
			this.selectedUser = [...selection];
		}
	}
};
</script>

<style lang="scss" scoped>
.system_user_container {
	display: flex;
	height: 100%;
}
</style>
